<template>
  <a-modal
    width="720px"
    :bodyStyle="store.userStore.bodyStyle"
    v-model:open="modal.open"
    :title="modal.title"
    ok-text="确认"
    :maskClosable="false"
  >
    <div class="modal-content" style="min-height: 400px">
      <a-form
        class="modelForm"
        ref="modelForm"
        :model="formData"
        :colon="false"
        :label-col="{ style: { width: '60px' } }"
        labelAlign="left"
      >
        <a-form-item>
          <span class="title">{{ formData?.questionnaireName }}</span>
        </a-form-item>
      </a-form>
      <t-form :formData="formData" :disabled="true">
        <template #custom="{ item, index }">
          <a-row :gutter="[8, 8]" style="margin-top: 8px">
            <a-col :span="24">
              <a-space>
                <a-button v-if="item.rules" @click="showValidateDel(item)">删除校验</a-button>
                <a-button @click="showValidateModal(item, index)">添加校验</a-button>
              </a-space>
            </a-col>
            <a-col v-if="item.showCondition" :span="24">
              <div class="row bor">
                <div class="hd">题目关联</div>
                <div class="hd">
                  {{
                    item.showCondition.show || !item.showCondition.hasOwnProperty('show')
                      ? '显示'
                      : '隐藏'
                  }}
                </div>
                <div class="hd">{{ item.showCondition.operator }}</div>
                <div class="col">
                  <div class="row" v-for="(row, i) in item.showCondition.conditions" :key="i">
                    <rule-item
                      :item="row"
                      :showConditionObj="showConditionObj"
                      :operatorMap="operatorMap"
                    />
                  </div>
                </div>
              </div>
            </a-col>
            <a-col v-if="item.rules && item.rules.length" :span="24">
              <div class="row bor">
                <div class="hd">校验</div>
                <div class="col">
                  <div class="row" v-for="(row, i) in item.rules" :key="i">
                    <div class="option">{{ valiType[row.mode] }}</div>
                    <div class="option">
                      <template v-if="row.mode === 'required'"> 必填 </template>
                      <template v-else-if="row.mode === 'number'">
                        <span v-if="row.min || row.min === 0"> ≥{{ row.min }}; </span>
                        <span v-if="row.max || row.max === 0"> &lt;{{ row.max }} </span>
                      </template>
                      <template v-else-if="row.mode === 'regexp'">
                        {{ row.patternStr }}
                      </template>
                    </div>
                    <div class="option">{{ row.message }}</div>
                  </div>
                </div>
              </div>
            </a-col>
          </a-row>
        </template>
      </t-form>
    </div>
    <template #footer>
      <a-button
        v-if="modal.type === 'detail'"
        key="submit"
        type="primary"
        @click="modal.open = false"
        >确认</a-button
      >
      <template v-else>
        <a-button @click="modal.open = false">取消</a-button>
        <a-button key="submit" type="primary" :loading="modal.loading" @click="confirm"
          >提交</a-button
        >
      </template>
    </template>
  </a-modal>
  <validate ref="validate" @onConfirm="validateConfirm" />
</template>

<script lang="ts" setup>
import { createVNode, reactive, ref, nextTick } from 'vue'
import store from '@/store'
import TForm from '@/components/TForm/index.vue'
import Validate from './validate.vue'
import { Modal } from 'ant-design-vue'
import { ExclamationCircleFilled } from '@ant-design/icons-vue'
import _ from 'lodash'
import ruleItem from './ruleItem.vue'

const operatorMap = {
  '===': '=',
  '>': '>',
  '>=': '≥',
  '<': '<',
  '<=': '≤',
  '!==': '≠'
}

const valiType = {
  required: '必填校验',
  number: '数字校验',
  regexp: '正则校验'
}

const modelForm = ref(null)
const showConditionObj = ref({})

const modal = reactive({
  title: '设置规则',
  type: 'detail',
  loading: false,
  open: false
})

const formData = ref([])

const current = ref({})

const init = (data) => {
  modelForm.value?.clearValidate()

  current.value = data

  formData.value = [
    {
      name: '表单内容',
      list: []
    }
  ]

  nextTick(() => {
    formData.value = [
      {
        name: '表单内容',
        list: data.cardFormData
      }
    ]

    const o = {}
    data.cardFormData.map((u) => {
      o[u.id] = u
    })

    showConditionObj.value = o

    modal.type = 'detail'
    modal.open = true
  })
}

const showConditionCurrent = ref()

const showConditionDel = (item) => {
  Modal.confirm({
    title: '删除',
    icon: createVNode(ExclamationCircleFilled, {
      style: {
        color: 'var(--color--danger)'
      }
    }),
    content: '确定删除题目关联吗？',
    okText: '确定',
    okButtonProps: {
      danger: true,
      type: 'primary'
    },
    cancelText: '取消',
    onOk() {
      console.log('OK')
      item.showCondition = null
      modal.type = 'modify'
    },
    onCancel() {
      console.log('Cancel')
    }
  })
}

const validate = ref(null)

const showValidateModal = (item, index) => {
  showConditionCurrent.value = index
  console.log(item)

  const c = _.cloneDeep(item)

  validate.value?.init(c)
}

const showValidateDel = (item) => {
  Modal.confirm({
    title: '删除',
    icon: createVNode(ExclamationCircleFilled, {
      style: {
        color: 'var(--color--danger)'
      }
    }),
    content: '确定删除校验吗？',
    okText: '确定',
    okButtonProps: {
      danger: true,
      type: 'primary'
    },
    cancelText: '取消',
    onOk() {
      console.log('OK')
      item.rules = null
      modal.type = 'modify'
    },
    onCancel() {
      console.log('Cancel')
    }
  })
}

const validateConfirm = (rules) => {
  if (rules && rules.length) {
    formData.value[showConditionCurrent.value[0]].list[showConditionCurrent.value[1]].rules = rules
  } else {
    formData.value[showConditionCurrent.value[0]].list[showConditionCurrent.value[1]].rules = null
  }

  modal.type = 'modify'
}

const confirm = () => {
  modal.loading = true
  emit('onConfirm', {
    data: current.value,
    success: () => {
      console.log('success')
      modal.loading = false
      modal.open = false
    },
    fail: () => {
      console.log('fail')
      modal.loading = false
    }
  })
}

const emit = defineEmits(['onConfirm'])

defineExpose({
  init
})
</script>

<style lang="less" scoped>
.bor {
  border: 2px solid #00a9ff;
}

.row {
  display: inline-flex;
  flex-direction: row;
  gap: 2px;
  background-color: #00a9ff;

  .title {
    width: 200px;
    padding: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: #fff;
  }

  .option {
    width: 120px;
    padding: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: #fff;
  }

  .hd {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    padding: 6px;
    background-color: #fff;
  }
}

.col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background-color: #00a9ff;
}
</style>
